<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html>
<html> 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="${ctx}/static/back/js/echarts.min.js" ></script>
	<script type="text/javascript" src="${ctx}/static/back/js/jquery-1.11.1.js" ></script>
	<body>
		  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		    <div id="main" style="width: 600px;height:400px;"></div>
		    <script type="text/javascript">
		        // 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));
				//ajax
				$.ajax({
					url:"${ctx}/echarts/getCategoryCount.action",
					type:"POST",
					dataType:"json",
					success : function(resp) {
						var data = resp.data;
						//x轴
						var xArray = new Array();
						//y轴
						var yArray = new Array();
						for (var i=0;i<data.length;i++) {
							xArray.push(data[i].name);
							yArray.push(data[i].count);
						}
						// 指定图表的配置项和数据
				        var option = {
				            title: {
				                text: '商品分类数量展示'
				            },
				            tooltip: {},
				            legend: {
				                data:['商品数量']
				            },
				            xAxis: {
				                data: xArray
				            },
				            yAxis: {},
				            series: [{
				                name: '商品数量',
				                type: 'bar',
				                data: yArray
				            }]
				        };
				
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
					}
				});
		        
		   	 </script>
	</body>
</html>
